<template>
	<view class="video-box">
		<scroll-view scroll-x>
			<view class="flex_fsc">
				<image src="" class="img"></image>
				<view class="img" style="border: 2rpx dashed #008965;">+</view>
			</view>
		</scroll-view>
		<view class="line-spacing uni-mt-40"></view>
		<view class="flex_sbc flex_wrap uni-mt-40">
			<view class="item flex_fsc active">
				<uni-icons type="circle-filled" size="20" color="#008965"></uni-icons>
				<view class="uni-ml-16">添加到训练问题</view>
			</view>
			<view class="item flex_fsc unactivated">
				<uni-icons type="circle" size="20" color="#008965"></uni-icons>
				<view class="uni-ml-16">添加到训练问题</view>
			</view>
			<view class="item flex_fsc unactivated">
				<uni-icons type="circle" size="20" color="#008965"></uni-icons>
				<view class="uni-ml-16">添加到训练问题</view>
			</view>
		</view>
		<view class="line-spacing uni-mt-40"></view>
		<view class="flex_sbc uni-mt-40">
			<view class="z-font-32">选择训练问题</view>
			<uni-icons type="forward" size="20" color="#d8dbde"></uni-icons>
		</view>
	</view>
	<bottom-box :buts="buts"></bottom-box>
</template>

<script setup>
import { onShow } from '@dcloudio/uni-app'
import { ref, reactive, getCurrentInstance } from 'vue';
const { proxy: that } = getCurrentInstance()

const buts = [{
	label: '取消',
	type: 'empty',
	color: '#008965',
	width: 300
}, {
	label: '确认提交',
	bgColor: '#008965',
	width: 300
}]

</script>

<style lang="scss">
	page {
		background: $uni-F5F5F5;
		box-sizing: border-box;
		padding-top: 32rpx;
	}
	
	.video-box {
		width: 100vw;
		box-sizing: border-box;
		padding: 40rpx 32rpx;
		background: $uni-white;
		.img {
			width: 156rpx;
			height: 156rpx;
			border-radius: 10px;
			flex-shrink: 0;
			margin-right: 20rpx;
			line-height: 156rpx;
			text-align: center;
			font-size: 44rpx;
			color: $uni-text-color-main;
			background: #F5FAF9;
			box-sizing: border-box;
		}
		.item {
			width: 324rpx;
			height: 72rpx;
			border-radius: 12rpx;
			box-sizing: border-box;
			padding: 0 20rpx;
			margin-top: 20rpx;
		}
		.active {
			background: #E6F5ED;
			border: 2rpx solid #ACD3BE;
			color: $uni-text-color-main;
		}
		.unactivated {
			color: $uni-text-color-grey;
			border: 2rpx solid #E8EAED;
		}
	}
</style>
